<!DOCTYPE html>
<html>
<head>
<title>test proto ajax</title>
<meta http-equiv="Content-Type" content="text/xml" charset="UTF-8">
<!--[if !IE]> -->
  <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
  <!-- <![endif]-->
  <!--[if IE]>
      <script src="http://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script>
  <![endif]-->
<style>
*{
  margin:0;
  padding:0;
}

</style>
</head>
<body>
   <h1> Ajax应用实例</h1>
      <form action="#">
        <input type="button" value="列出所有沿海省市" onclick="startRequest('all'); "/>
        <div id="all"></div>
        <input type="button" value="列出江北沿海省市" onclick="startRequest('north'); "/>
        <div id="north"></div>
      </form>

<script>
var xmlHttp;
var requestType="";
function createXMLHttpRequest(){
    if(window.ActiveXObject){
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }
}
function startRequest(theRequestType){

    requestType = theRequestType;
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = myCallback;
    xmlHttp.open("GET","Response.xml",true);  
    xmlHttp.send(null);
}
function myCallback(){
    if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
            if(requestType=="all")
                listAll();
            else if(requestType=="north")
                listNorth();
        }
    }
}
function listAll(){
    var xmlDoc = xmlHttp.responseXML;
    console.log(xmlDoc);
    var allProvs = xmlDoc.getElementsByTagName("prov");
    outputList("all",allProvs);
}
function listNorth(){
    var xmlDoc = xmlHttp.responseXML;
    console.log(xmlDoc);
    var north = xmlDoc.getElementsByTagName("north")[0];
    console.log(north);
    var northProvs = north.getElementsByTagName("prov");
    outputList("north",northProvs);
}
function outputList(title,provs){
    var out=title;
    var currentProv = null;
    for(var i=0;i<provs.length;i++){
    currentProv = provs[i];
    out = out +"<br/>" + currentProv.childNodes[0].nodeValue;
    }
    document.getElementById(title).innerHTML = out;
}
</script>
</body>
</html>